<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.3.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"chuangges.gitee.io","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"right","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="CSS 常用、PC 样式、Mobile 样式、Scss 预处理">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS 样式">
<meta property="og:url" content="https://chuangges.gitee.io/2019/05/08/3-2-css/index.html">
<meta property="og:site_name" content="闯哥要去流浪了">
<meta property="og:description" content="CSS 常用、PC 样式、Mobile 样式、Scss 预处理">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://chuangges.gitee.io/images/web/loading.png">
<meta property="article:published_time" content="2019-05-08T14:32:08.000Z">
<meta property="article:modified_time" content="2023-10-07T10:39:19.738Z">
<meta property="article:author" content="chuangges">
<meta property="article:tag" content="HTML CSS">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://chuangges.gitee.io/images/web/loading.png">

<link rel="canonical" href="https://chuangges.gitee.io/2019/05/08/3-2-css/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>CSS 样式 | 闯哥要去流浪了</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="闯哥要去流浪了" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">闯哥要去流浪了</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">愿你岁月可回首，且以深情共白头</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://chuangges.gitee.io/2019/05/08/3-2-css/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/chuang.png">
      <meta itemprop="name" content="chuangges">
      <meta itemprop="description" content="chuangge's blog.">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="闯哥要去流浪了">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          CSS 样式
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2019-05-08 22:32:08" itemprop="dateCreated datePublished" datetime="2019-05-08T22:32:08+08:00">2019-05-08</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2023-10-07 18:39:19" itemprop="dateModified" datetime="2023-10-07T18:39:19+08:00">2023-10-07</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/HTML-CSS/" itemprop="url" rel="index"><span itemprop="name">HTML CSS</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>30k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>27 分钟</span>
            </span>
            <div class="post-description">CSS 常用、PC 样式、Mobile 样式、Scss 预处理</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="一、CSS-常用"><a href="#一、CSS-常用" class="headerlink" title="一、CSS 常用"></a>一、CSS 常用</h1><h2 id="浏览器兼容"><a href="#浏览器兼容" class="headerlink" title="浏览器兼容"></a>浏览器兼容</h2><ul>
<li>img 之间出现间距：浮动。</li>
<li>上下 margin 重合问题：上下选一个。</li>
<li>li 元素使用 display: inline-block 时会出现缝隙：浮动、font-size: 0。</li>
<li>opacity、placeholder、outline、伪元素：兼容方案 CSS Hack (前缀、IE 注释)。</li>
<li>子元素 margin-top 出现在父元素上方：父元素 overflow: hidden &#x2F; padding-top。</li>
</ul>
<h2 id="css-单位"><a href="#css-单位" class="headerlink" title="css 单位"></a>css 单位</h2><ul>
<li><strong>rem</strong>: 相对于根元素字体尺寸</li>
<li><strong>em</strong>: 相对于父级元素的字体尺寸</li>
<li><strong>%</strong>: 百分比，相对于父元素的尺寸</li>
<li><strong>px</strong>: 像素，相对于用户设备分辨率的最基本单元</li>
<li>pt：Word等办公软件中使用的字体大小单位</li>
<li>dp：安卓开发时使用的长度单位</li>
<li>sp：安卓开发时使用的字体大小单位</li>
<li>vw：视窗宽度，1vw等于视窗宽度的 1%</li>
<li>vh：视窗高度，1vh等于视窗高度的 1%</li>
<li>vmin、vmax：vw 和 vh 中较 小&#x2F;大 的那个</li>
<li>dvh：内容高度，会自动忽略浏览器导航栏高度。</li>
<li>lvh：最大高度，包含浏览器导航栏高度。</li>
<li>svh：最小高度，不包含浏览器导航栏高度。</li>
</ul>
<h2 id="transform-变换"><a href="#transform-变换" class="headerlink" title="transform 变换"></a>transform 变换</h2><ul>
<li><code>变换属性</code>：transform-origin 中心点、transform-style 场景、perspective 视距、perspective-origin 视距基点、backface-visibility 是否可看场景背面。</li>
<li><code>2D 变换</code>：translate: translate[X&#x2F;Y] 位移、scale: scale[X&#x2F;Y]、rotate: rotate 旋转、skew: skew[X&#x2F;Y] 变形、matrix 矩阵(2D 变换的本质)。</li>
<li><code>3D 变换</code>：translate3d: translate(3d&#x2F;Z) 位移、scale3d: scale(3d&#x2F;Z) 缩放、rotate3d: rotate(3d&#x2F;X&#x2F;Y&#x2F;Z) 旋转、matrix3d 矩阵(3D 变换的本质)。</li>
</ul>
  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.img</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">30deg</span>);</span><br><span class="line">    <span class="attribute">transform-origin</span>: <span class="number">200px</span> <span class="number">300px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d;</span><br><span class="line">    <span class="comment">/* perspective 配合其他函数时仅表示当前元素的视距 */</span></span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">perspective</span>(<span class="number">200px</span>) <span class="built_in">rotateY</span>(<span class="number">45deg</span>);</span><br><span class="line">    <span class="comment">// perspective 表示子元素共享的视距 </span></span><br><span class="line">    <span class="attribute">perspective</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="comment">// center 表示眼睛在场景正中心</span></span><br><span class="line">    <span class="attribute">perspective-origin</span>: center;</span><br><span class="line">    <span class="selector-tag">img</span> &#123;</span><br><span class="line">        <span class="comment">// 父元素不指定 3D 则失效 </span></span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateZ</span>(<span class="number">16px</span>);</span><br><span class="line">        <span class="comment">// 让背面不可见，旋转时常用</span></span><br><span class="line">        <span class="attribute">backface-visibility</span>: hidden;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 为动画元素开启 GPU 加速</span></span><br><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateZ</span>(<span class="number">0</span>);</span><br><span class="line">    <span class="comment">// transform: translate3d(0,0,0)</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="transition-过渡"><a href="#transition-过渡" class="headerlink" title="transition 过渡"></a>transition 过渡</h2><blockquote>
<p>默认样式中定义元素的初始样式和过渡函数，然后定义过渡后的元素样式。</p>
</blockquote>
  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: orange;</span><br><span class="line">    <span class="attribute">transition</span>: all <span class="number">1s</span> ease-in .<span class="number">2s</span>;  // 属性 过渡时间 曲线 延迟时间</span><br><span class="line">    <span class="comment">/* transition: width 1s ease-in, backgroundColor 1s ease-in; */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="animation-动画"><a href="#animation-动画" class="headerlink" title="animation 动画"></a>animation 动画</h2><blockquote>
<p>通过 animation 绑定 @keyframes 定义的动画，自动实现一种或多种形态同时变化的效果，精彩案例可<a target="_blank" rel="external nofollow noopener noreferrer" href="https://mp.weixin.qq.com/s/ShPvRu6bo7c-ETlHAQrLZQ">点击查看</a>。其它实现方式有：setTimeout (指定间隔更新样式但导致频繁重绘)、requestAnimationFrame (根据浏览器的刷新频率实现最佳绘制)、<code>Animate.css</code>：(只需为元素添加类名的动画库)、<code>Tween.js</code> (各种经典算法的补间动画可实现平滑效果)、<code>Three.js</code>：(基于浏览器接口 webgl 实现 3D 动画)、<code>swiper.animate.js</code> (移动端触摸滑块类库)。</p>
</blockquote>
  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123; </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#f00</span>; </span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">36px</span>; </span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> change &#123;</span><br><span class="line">    <span class="number">0%</span>   &#123; <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">4px</span> <span class="number">#f00</span> &#125;</span><br><span class="line">    <span class="number">50%</span>  &#123; <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">40px</span> <span class="number">#f00</span> &#125;</span><br><span class="line">    <span class="number">100%</span> &#123; <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">4px</span> <span class="number">#f00</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    // 动画名 时间 曲线 延迟时间 播放次数 是否逆向播放 <span class="selector-attr">[非动画状态]</span></span><br><span class="line">    <span class="attribute">animation</span>: change <span class="number">1s</span> ease-in infinite;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span><span class="selector-class">.stop</span> &#123;</span><br><span class="line">    <span class="attribute">animation-play-state</span>: paused;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="组件样式"><a href="#组件样式" class="headerlink" title="组件样式"></a>组件样式</h2><ul>
<li><strong>Scoped</strong>：在元素中添加了一个唯一属性，注意样式修改时必须定位属性值。</li>
<li><strong>Module</strong>：通过插件 css-loader 等配置的命名规则将 :class 绑定的类名重新生成。</li>
</ul>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-tag">h1</span><span class="selector-attr">[data-v-4c3b6c1c]</span> &#123;</span></span><br><span class="line"><span class="language-css">    <span class="attribute">color</span>: <span class="number">#f00</span>;</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">&quot;css.wrap&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">:class</span>=<span class="string">&quot;css.input&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">module</span>=<span class="string">&quot;css&quot;</span> <span class="attr">lang</span>=<span class="string">&quot;scss&quot;</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    <span class="selector-class">.wrap</span> &#123;</span></span><br><span class="line"><span class="language-css">        <span class="attribute">color</span>: <span class="number">#999</span>;</span></span><br><span class="line"><span class="language-css">        <span class="selector-class">.input</span> &#123; &#125;</span></span><br><span class="line"><span class="language-css">    &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="新增特性"><a href="#新增特性" class="headerlink" title="新增特性"></a>新增特性</h2>  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 平滑滚动：取代 window.scrollY</span></span><br><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">    scroll-behavior: smooth;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 滚动捕抓：强制将 x 轴滚动后元素位置设置到滚动开始位置</span></span><br><span class="line"><span class="selector-class">.parent</span> &#123;</span><br><span class="line">    <span class="attribute">scroll-snap-type</span>: x mandatory;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.child</span> &#123;</span><br><span class="line">    <span class="attribute">scroll-snap-align</span>: start;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * @title 表单验证</span></span><br><span class="line"><span class="comment"> * @param :valid 用于匹配输入值为合法的元素</span></span><br><span class="line"><span class="comment"> * @param :invalid 用于匹配输入值为非法的元素</span></span><br><span class="line"><span class="comment"> * @param :required 用于匹配具有required 属性的元素</span></span><br><span class="line"><span class="comment"> * @param pattern 属性规定用于验证输入字段的正则表达式</span></span><br><span class="line"><span class="comment"> * @param required 属性规定必需在提交之前填写输入字段</span></span><br><span class="line"><span class="comment">**/</span> </span><br><span class="line">&lt;<span class="selector-tag">input</span> type=&quot;text&quot; maxlength=&quot;<span class="number">9</span>&quot; pattern=&quot;^<span class="number">1</span><span class="selector-attr">[3456]</span>\d&#123;<span class="number">7</span>&#125;$&quot; required/&gt;</span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:valid</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: green;</span><br><span class="line">    <span class="attribute">box-shadow</span>: inset <span class="number">5px</span> <span class="number">0</span> <span class="number">0</span> green;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:focus</span><span class="selector-pseudo">:valid</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: yellow;</span><br><span class="line">    <span class="attribute">box-shadow</span>: inset <span class="number">5px</span> <span class="number">0</span> <span class="number">0</span> yellow;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:invalid</span><span class="selector-pseudo">:required</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: red;</span><br><span class="line">    <span class="attribute">box-shadow</span>: inset <span class="number">5px</span> <span class="number">0</span> <span class="number">0</span> red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// content attr 抓取数据</span></span><br><span class="line">&lt;<span class="selector-tag">div</span> data-msg=&quot;数据&quot;&gt;hover&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid red;  </span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="built_in">attr</span>(data-msg);</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200%</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">25px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid green;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 鼠标悬浮时显示：比如导航菜单</span></span><br><span class="line">&lt;<span class="selector-tag">span</span> class=&quot;user&quot;&gt;用户&lt;/<span class="selector-tag">span</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">span</span> class=&quot;<span class="selector-tag">menu</span>&quot;&gt;</span><br><span class="line">    &lt;<span class="selector-tag">ul</span>&gt;&lt;<span class="selector-tag">li</span>&gt;登录&lt;/<span class="selector-tag">li</span>&gt;&lt;<span class="selector-tag">li</span>&gt;退出&lt;/<span class="selector-tag">li</span>&gt;&lt;/<span class="selector-tag">ul</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">span</span>&gt;</span><br><span class="line"><span class="selector-class">.menu</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.menu</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.user</span><span class="selector-pseudo">:hover</span> + <span class="selector-class">.menu</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// @layer：定义样式优先级，层越靠后优先级越高</span></span><br><span class="line"><span class="keyword">@layer</span> framework, override;</span><br><span class="line"><span class="keyword">@layer</span> override &#123;</span><br><span class="line">    <span class="selector-class">.title</span> &#123; <span class="attribute">color</span>: white; &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@layer</span> framework &#123;</span><br><span class="line">    <span class="selector-class">.title</span> &#123; <span class="attribute">color</span>: red; &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// :has()：用于表示具有某些子元素的父元素</span></span><br><span class="line"><span class="selector-class">.parent</span><span class="selector-pseudo">:has</span>(.child) &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 防止按钮重复点击：取代节流 throttle.js</span></span><br><span class="line"><span class="selector-tag">button</span>&#123;</span><br><span class="line">    <span class="attribute">animation</span>: throttle <span class="number">2s</span> step-end forwards;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">button</span><span class="selector-pseudo">:active</span>&#123;</span><br><span class="line">    <span class="attribute">animation</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> throttle &#123;</span><br><span class="line">    from &#123; <span class="attribute">pointer-events</span>: none; &#125;</span><br><span class="line">    to &#123; <span class="attribute">pointer-events</span>: all; &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="Loading"><a href="#Loading" class="headerlink" title="Loading"></a>Loading</h2>  <div align="center">
      <img src="" data-original="/images/web/loading.png" alt="Loading" width="100%">
  </div>

  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、平滑加载</span></span><br><span class="line"><span class="selector-class">.progress-1</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(<span class="number">#000</span> <span class="number">0</span> <span class="number">0</span>) <span class="number">0</span>/<span class="number">0%</span> no-repeat <span class="number">#ddd</span>;</span><br><span class="line">    <span class="attribute">animation</span>: p1 <span class="number">2s</span> infinite linear;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> p1 &#123;</span><br><span class="line">    <span class="number">100%</span> &#123; <span class="attribute">background-size</span>: <span class="number">100%</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、按步加载</span></span><br><span class="line"><span class="selector-class">.progress-2</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(orange <span class="number">0</span> <span class="number">0</span>) <span class="number">0</span>/<span class="number">0%</span> no-repeat lightblue;</span><br><span class="line">    <span class="attribute">animation</span>: p2 <span class="number">2s</span> infinite <span class="built_in">steps</span>(<span class="number">10</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> p2 &#123;</span><br><span class="line">    <span class="number">100%</span> &#123; <span class="attribute">background-size</span>: <span class="number">110%</span> &#125;   <span class="comment">// step 10：100% + (1/10) * 100%</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、条纹加载</span></span><br><span class="line"><span class="selector-class">.progress-3</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">repeating-linear-gradient</span>(<span class="number">135deg</span>, <span class="number">#f03355</span> <span class="number">0</span> <span class="number">10px</span>, </span><br><span class="line">    <span class="number">#ffa516</span> <span class="number">0</span> <span class="number">20px</span>) <span class="number">0</span>/<span class="number">0%</span> no-repeat,</span><br><span class="line">    <span class="built_in">repeating-linear-gradient</span>(<span class="number">135deg</span>, <span class="number">#ddd</span> <span class="number">0</span> <span class="number">10px</span>, <span class="number">#eee</span> <span class="number">0</span> <span class="number">20px</span>) <span class="number">0</span>/<span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">animation</span>: p3 <span class="number">2s</span> infinite;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> p3 &#123;</span><br><span class="line">    <span class="number">100%</span> &#123; <span class="attribute">background-size</span>: <span class="number">100%</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4、虚线加载</span></span><br><span class="line"><span class="selector-class">.progress-4</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">    -webkit-<span class="attribute">mask</span>: <span class="built_in">linear-gradient</span>(<span class="number">90deg</span>,<span class="number">#000</span> <span class="number">70%</span>,<span class="number">#0000</span> <span class="number">0</span>) <span class="number">0</span>/<span class="number">20%</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(<span class="number">#000</span> <span class="number">0</span> <span class="number">0</span>) <span class="number">0</span>/<span class="number">0%</span> no-repeat <span class="number">#ddd</span>;</span><br><span class="line">    <span class="attribute">animation</span>: p4 <span class="number">2s</span> infinite <span class="built_in">steps</span>(<span class="number">6</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> p4 &#123;</span><br><span class="line">    <span class="number">100%</span> &#123; <span class="attribute">background-size</span>: <span class="number">120%</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 5、电池加载</span></span><br><span class="line"><span class="selector-class">.progress-5</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">80px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#000</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">repeating-linear-gradient</span>(<span class="number">90deg</span>, <span class="number">#000</span> <span class="number">0</span> <span class="number">10px</span>,</span><br><span class="line">    <span class="number">#0000</span> <span class="number">0</span> <span class="number">16px</span>) <span class="number">0</span>/<span class="number">0%</span> no-repeat content-box content-box;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">animation</span>: p5 <span class="number">2s</span> infinite <span class="built_in">steps</span>(<span class="number">6</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.progress-5</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">50%</span>);</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> p5 &#123;</span><br><span class="line">    <span class="number">100%</span> &#123; <span class="attribute">background-size</span>: <span class="number">120%</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 6、内嵌加载</span></span><br><span class="line"><span class="selector-class">.progress-6</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">22px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#514b82</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.progress-6</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">2px</span>;</span><br><span class="line">    inset: <span class="number">0</span> <span class="number">100%</span> <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: inherit;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#514b82</span>;</span><br><span class="line">    <span class="attribute">animation</span>: p6 <span class="number">2s</span> infinite;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> p6 &#123;</span><br><span class="line">    <span class="number">100%</span> &#123; inset: <span class="number">0</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 7、珠链加载</span></span><br><span class="line"><span class="selector-class">.progress-7</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">24px</span>;</span><br><span class="line">    -webkit-<span class="attribute">mask</span>:    // radial-gradient 将宽度四等分，每份以最小边为直径画圆</span><br><span class="line">    <span class="built_in">radial-gradient</span>(circle closest-side, <span class="number">#000</span> <span class="number">94%</span>, <span class="number">#0000</span>) <span class="number">0</span> <span class="number">0</span>/<span class="number">25%</span> <span class="number">100%</span>,</span><br><span class="line">    <span class="built_in">linear-gradient</span>(<span class="number">#000</span> <span class="number">0</span> <span class="number">0</span>) center/<span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">12px</span>) <span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">12px</span>)</span><br><span class="line">    no-repeat;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(<span class="number">#25b09b</span> <span class="number">0</span> <span class="number">0</span>) <span class="number">0</span>/<span class="number">0%</span> no-repeat <span class="number">#ddd</span>;</span><br><span class="line">    <span class="attribute">animation</span>: p7 <span class="number">2s</span> infinite linear;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> p7 &#123;</span><br><span class="line">    <span class="number">100%</span> &#123; <span class="attribute">background-size</span>: <span class="number">100%</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 8、斑马线加载</span></span><br><span class="line"><span class="selector-class">.progress-8</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">60px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">60px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">-webkit-<span class="attribute">mask</span>: <span class="built_in">linear-gradient</span>(<span class="number">0deg</span>,<span class="number">#000</span> <span class="number">55%</span>,<span class="number">#0000</span> <span class="number">0</span>) bottom/<span class="number">100%</span> <span class="number">18.18%</span>;</span><br><span class="line"><span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(<span class="number">#f03355</span> <span class="number">0</span> <span class="number">0</span>) bottom/<span class="number">100%</span> <span class="number">0%</span> no-repeat <span class="number">#ddd</span>;</span><br><span class="line">    <span class="attribute">animation</span>: p8 <span class="number">2s</span> infinite <span class="built_in">steps</span>(<span class="number">7</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> p8 &#123;</span><br><span class="line">    <span class="number">100%</span> &#123; <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">115%</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 9、水柱加载</span></span><br><span class="line"><span class="selector-class">.progress-9</span> &#123;    </span><br><span class="line">    <span class="attr">--r1</span>: <span class="number">154%</span>;</span><br><span class="line">    <span class="attr">--r2</span>: <span class="number">68.5%</span>;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">60px</span>;</span><br><span class="line">    <span class="attribute">height</span>:<span class="number">60px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>; </span><br><span class="line">    <span class="attribute">background</span>:</span><br><span class="line">        <span class="built_in">radial-gradient</span>(<span class="built_in">var</span>(--r1) <span class="built_in">var</span>(--r2) at top , <span class="number">#0000</span> <span class="number">79.5%</span>, </span><br><span class="line">        <span class="number">#269af2</span> <span class="number">80%</span>) center left,</span><br><span class="line">        <span class="built_in">radial-gradient</span>(<span class="built_in">var</span>(--r1) <span class="built_in">var</span>(--r2) at bottom, <span class="number">#269af2</span> <span class="number">79.5%</span>, </span><br><span class="line">        <span class="number">#0000</span> <span class="number">80%</span>) center center,</span><br><span class="line">        <span class="built_in">radial-gradient</span>(<span class="built_in">var</span>(--r1) <span class="built_in">var</span>(--r2) at top , <span class="number">#0000</span> <span class="number">79.5%</span>, </span><br><span class="line">        <span class="number">#269af2</span> <span class="number">80%</span>) center right, <span class="number">#ccc</span>;</span><br><span class="line">    <span class="attribute">background-size</span>: <span class="number">50.5%</span> <span class="number">220%</span>;</span><br><span class="line">    <span class="attribute">background-position</span>: -<span class="number">100%</span> <span class="number">0%</span>,<span class="number">0%</span> <span class="number">0%</span>,<span class="number">100%</span> <span class="number">0%</span>;</span><br><span class="line">    <span class="attribute">background-repeat</span>: no-repeat;</span><br><span class="line">    <span class="attribute">animation</span>: p9 <span class="number">2s</span> infinite linear;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> p9 &#123;</span><br><span class="line">    <span class="number">33%</span>  &#123; <span class="attribute">background-position</span>:     <span class="number">0%</span> <span class="number">33%</span>, <span class="number">100%</span> <span class="number">33%</span> , <span class="number">200%</span> <span class="number">33%</span>  &#125;</span><br><span class="line">    <span class="number">66%</span>  &#123; <span class="attribute">background-position</span>: -<span class="number">100%</span>  <span class="number">66%</span>, <span class="number">0%</span>   <span class="number">66%</span> , <span class="number">100%</span> <span class="number">66%</span>  &#125;</span><br><span class="line">    <span class="number">100%</span> &#123; <span class="attribute">background-position</span>:    <span class="number">0%</span> <span class="number">100%</span>, <span class="number">100%</span> <span class="number">100%</span>, <span class="number">200%</span> <span class="number">100%</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 10、信号加载</span></span><br><span class="line"><span class="selector-class">.progress-10</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">60px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">200px</span> <span class="number">200px</span> <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">    -webkit-<span class="attribute">mask</span>: <span class="built_in">repeating-radial-gradient</span>(farthest-side at bottom,</span><br><span class="line">    <span class="number">#0000</span> <span class="number">0</span>, <span class="number">#000</span> <span class="number">1px</span> <span class="number">12%</span>,<span class="number">#0000</span> <span class="built_in">calc</span>(<span class="number">12%</span> + <span class="number">1px</span>) <span class="number">20%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">radial-gradient</span>(farthest-side at bottom, <span class="number">#514b82</span> <span class="number">0</span> <span class="number">95%</span>,</span><br><span class="line">    <span class="number">#0000</span> <span class="number">0</span>) bottom/<span class="number">0%</span> <span class="number">0%</span> no-repeat <span class="number">#ddd</span>;</span><br><span class="line">    <span class="attribute">animation</span>:p10 <span class="number">2s</span> infinite <span class="built_in">steps</span>(<span class="number">6</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> p10 &#123;</span><br><span class="line">    <span class="number">100%</span> &#123; <span class="attribute">background-size</span>: <span class="number">120%</span> <span class="number">120%</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h1 id="二、PC-样式"><a href="#二、PC-样式" class="headerlink" title="二、PC 样式"></a>二、PC 样式</h1><h2 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h2>  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* reset.css  */</span></span><br><span class="line"><span class="selector-tag">body</span>, <span class="selector-tag">h1</span>, <span class="selector-tag">h2</span>, <span class="selector-tag">h3</span>, <span class="selector-tag">h4</span>, <span class="selector-tag">h5</span>, <span class="selector-tag">h6</span>, hr, <span class="selector-tag">p</span>, <span class="selector-tag">blockquote</span>, <span class="selector-tag">dl</span>, <span class="selector-tag">dt</span>, <span class="selector-tag">dd</span>, <span class="selector-tag">ul</span>, <span class="selector-tag">ol</span>, <span class="selector-tag">li</span>, pre, <span class="selector-tag">form</span>, <span class="selector-tag">fieldset</span>, <span class="selector-tag">legend</span>, <span class="selector-tag">button</span>, <span class="selector-tag">input</span>, <span class="selector-tag">textarea</span>, <span class="selector-tag">th</span>, <span class="selector-tag">td</span> &#123; <span class="attribute">margin</span>:<span class="number">0</span>; <span class="attribute">padding</span>:<span class="number">0</span>; &#125; </span><br><span class="line"><span class="selector-tag">body</span>, <span class="selector-tag">button</span>, <span class="selector-tag">input</span>, select, <span class="selector-tag">textarea</span> &#123; <span class="attribute">font</span>:<span class="number">12px</span>/<span class="number">1.5</span>tahoma, arial, \<span class="number">5</span>b8b\<span class="number">4</span>f53; &#125; </span><br><span class="line"><span class="selector-tag">h1</span>, <span class="selector-tag">h2</span>, <span class="selector-tag">h3</span>, <span class="selector-tag">h4</span>, <span class="selector-tag">h5</span>, <span class="selector-tag">h6</span>&#123; <span class="attribute">font-size</span>:<span class="number">100%</span>; &#125; </span><br><span class="line"><span class="selector-tag">address</span>, <span class="selector-tag">cite</span>, <span class="selector-tag">dfn</span>, <span class="selector-tag">em</span>, <span class="selector-tag">var</span> &#123; <span class="attribute">font-style</span>:normal; &#125; </span><br><span class="line"><span class="selector-tag">code</span>, <span class="selector-tag">kbd</span>, pre, <span class="selector-tag">samp</span> &#123; <span class="attribute">font-family</span>:couriernew, courier, monospace; &#125; </span><br><span class="line">small&#123; <span class="attribute">font-size</span>:<span class="number">12px</span>; &#125; </span><br><span class="line"><span class="selector-tag">ul</span>, <span class="selector-tag">ol</span> &#123; <span class="attribute">list-style</span>:none; &#125; </span><br><span class="line"><span class="selector-tag">a</span> &#123; <span class="attribute">text-decoration</span>:none; <span class="attribute">color</span>: <span class="number">#3D3F40</span>; &#125; </span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123; <span class="attribute">color</span>: <span class="number">#62B060</span>; &#125; </span><br><span class="line"><span class="selector-tag">sup</span> &#123; <span class="attribute">vertical-align</span>:text-top; &#125; </span><br><span class="line">sub&#123; <span class="attribute">vertical-align</span>:text-bottom; &#125; </span><br><span class="line"><span class="selector-tag">fieldset</span>, <span class="selector-tag">img</span> &#123; <span class="attribute">border</span>:<span class="number">0</span>; &#125; </span><br><span class="line"><span class="selector-tag">button</span>, <span class="selector-tag">input</span>, select, <span class="selector-tag">textarea</span> &#123; <span class="attribute">font-size</span>:<span class="number">100%</span>; &#125; </span><br><span class="line"><span class="selector-tag">table</span> &#123; <span class="attribute">border-collapse</span>:collapse; <span class="attribute">border-spacing</span>:<span class="number">0</span>; &#125;</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    -moz-osx-<span class="attribute">font-smoothing</span>: grayscale;</span><br><span class="line">    -webkit-<span class="attribute">font-smoothing</span>: antialiased;  <span class="comment">/* 设置字体平滑 */</span></span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">&quot;Microsoft YaHei&quot;</span>, <span class="string">&#x27;Muli&#x27;</span>, <span class="string">&quot;Helvetica&quot;</span>, Arial, sans-serif;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="滚动条"><a href="#滚动条" class="headerlink" title="滚动条"></a>滚动条</h2>  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*  定义滚动条样式   */</span>   </span><br><span class="line">::-webkit-scrollbar &#123;   </span><br><span class="line"><span class="comment">/* ::-webkit-scrollbar:horizontal  */</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">10px</span>;   </span><br><span class="line">    <span class="attribute">height</span>: <span class="number">10px</span>;  <span class="comment">/*  高宽分别对应横竖滚动条的尺寸  */</span></span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#F5F5F5</span>;   </span><br><span class="line">&#125;  </span><br><span class="line"><span class="comment">/*定义滚动条轨道 内阴影+圆角*/</span>   </span><br><span class="line">::-webkit-scrollbar-track &#123;   </span><br><span class="line">    <span class="attribute">box-shadow</span>: inset <span class="number">0</span> <span class="number">0</span> <span class="number">6px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.3</span>);     </span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">10px</span>;   </span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#F5F5F5</span>;   </span><br><span class="line">&#125;   </span><br><span class="line"><span class="comment">/*定义滑块 内阴影+圆角*/</span>   </span><br><span class="line">::-webkit-scrollbar-thumb &#123;   </span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">10px</span>;   </span><br><span class="line">    <span class="attribute">box-shadow</span>: inset <span class="number">0</span> <span class="number">0</span> <span class="number">6px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">3</span>);   </span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#C0C0C0</span>;   </span><br><span class="line">&#125;  </span><br></pre></td></tr></table></figure>


<h2 id="元素居中"><a href="#元素居中" class="headerlink" title="元素居中"></a>元素居中</h2>  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parent</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">justify-content</span>: center;</span><br><span class="line">    <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2</span></span><br><span class="line"><span class="selector-class">.parent</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="selector-class">.child</span> &#123;</span><br><span class="line">        <span class="attribute">position</span>: absolute;</span><br><span class="line">        <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">        <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.parent</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: grid;</span><br><span class="line">    <span class="selector-class">.child</span> &#123;</span><br><span class="line">        justify-self: center;</span><br><span class="line">        <span class="attribute">align-self</span>: center;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.parent</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    &amp;<span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">        <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">        <span class="attribute">display</span>: inline-block;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">        <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-class">.child</span> &#123;</span><br><span class="line">        <span class="attribute">display</span>: inline-block;</span><br><span class="line">        <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="布局方式"><a href="#布局方式" class="headerlink" title="布局方式"></a>布局方式</h2>  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 左边固定右边自适应的两列布局（定位和flex方式略） */</span></span><br><span class="line"><span class="selector-class">.parent</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;            </span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">0</span>;               </span><br><span class="line">    <span class="attribute">visibility</span>: hidden;     </span><br><span class="line">    <span class="attribute">clear</span>: both;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.parent</span> &#123;  </span><br><span class="line">    *zoom : <span class="number">1</span>      </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.left</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.right</span> &#123;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">120px</span>;  </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 两边固定中间自适应的三列布局 (浮动和定位略) */</span></span><br><span class="line"><span class="selector-class">.parent</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.left</span>,<span class="selector-class">.right</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.middle</span> &#123;</span><br><span class="line">    <span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">200px</span>; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 移动端窗口居中布局 */</span></span><br><span class="line"><span class="selector-class">.text_box</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#eff1f2</span>;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50vw</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50vh</span>;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);  </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.text_box</span> <span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50vw</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50vh</span>;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="瀑布流布局"><a href="#瀑布流布局" class="headerlink" title="瀑布流布局"></a>瀑布流布局</h2><div style="text-indent: 2em">原理是页面容器内的多个高度不固定的 div 之间按照一定的间隔参差不齐的无序浮动，鼠标滚动时不断在容器内的尾部加载数据并自动加载到空缺位置，不断循环。</div>
<div style="text-indent: 2em">核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随自身内容动态改变高度），同时每个项目列表呈堆栈形式排列，最关键的是，堆栈之间彼此之间没有多余的间距差存大。</div>

  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 大层 */</span></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 瀑布流层 */</span></span><br><span class="line"><span class="selector-class">.waterfall</span> &#123;</span><br><span class="line">    <span class="attribute">column-count</span>: <span class="number">4</span>;</span><br><span class="line">    <span class="attribute">column-gap</span>: <span class="number">1em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 一个内容层 */</span></span><br><span class="line"><span class="selector-class">.item</span> &#123; </span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">    -webkit-column-<span class="attribute">break-inside</span>: avoid; <span class="comment">/* Chrome, Safari, Opera */</span></span><br><span class="line">    <span class="attribute">page-break-inside</span>: avoid;  <span class="comment">/* Firefox */</span></span><br><span class="line">    <span class="attribute">break-inside</span>: avoid;       <span class="comment">/* IE 10+ */</span></span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.item</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">margin-bottom</span>:<span class="number">10px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="表单元素"><a href="#表单元素" class="headerlink" title="表单元素"></a>表单元素</h2>  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 清除默认框 */</span></span><br><span class="line"><span class="selector-tag">input</span>&#123;</span><br><span class="line">    <span class="attribute">border</span>: none / <span class="number">0</span> ;  </span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 清除下拉框默认选择样式 */</span></span><br><span class="line">select&#123;</span><br><span class="line">    appearance: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 隐藏下拉箭头 */</span></span><br><span class="line">select::-ms-expand &#123; </span><br><span class="line">    <span class="attribute">display</span>: none; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 应用于有焦点的元素(输入框, 超链接)具有焦点的时间内*/</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:focus</span>, <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>&#123; </span><br><span class="line">    <span class="attribute">outline</span>: <span class="number">1px</span>  dotted red; </span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0.6</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:focus</span>&#123; </span><br><span class="line">    <span class="attribute">background</span>: yellow; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* placeholder 颜色 */</span></span><br><span class="line">::-webkit-input-placeholder&#123;  </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#d3d3d3</span>; </span><br><span class="line">&#125; </span><br><span class="line">:-moz-placeholder&#123;  </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#d3d3d3</span>; </span><br><span class="line">&#125; </span><br><span class="line">::-moz-placeholder&#123; </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#d3d3d3</span>;</span><br><span class="line">&#125; </span><br><span class="line">:-ms-input-placeholder&#123;  </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#d3d3d3</span>; </span><br><span class="line">&#125; </span><br></pre></td></tr></table></figure>


<h2 id="文本对齐"><a href="#文本对齐" class="headerlink" title="文本对齐"></a>文本对齐</h2><blockquote>
<p>一行居中、多行左对齐</p>
</blockquote>
  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">text-align</span>: left;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="文本超出省略"><a href="#文本超出省略" class="headerlink" title="文本超出省略"></a>文本超出省略</h2>  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 单行文本 */</span></span><br><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="attribute">text-overflow</span>: ellipsis;  </span><br><span class="line">    <span class="attribute">white-space</span>: nowrap;  </span><br><span class="line">    <span class="attribute">word-break</span>: break-all;    </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 多行文本 */</span></span><br><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">max-width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">    <span class="attribute">word-break</span>: break-all;</span><br><span class="line">    <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">    line-clamp: <span class="number">3</span>;</span><br><span class="line">    -webkit-line-clamp: <span class="number">3</span>;</span><br><span class="line">    -webkit-box-orient: vertical;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 跨浏览器兼容方法 */</span></span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">42px</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&quot;...&quot;</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">20px</span> <span class="number">1px</span> <span class="number">45px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">ellipsis_bg.png</span>) repeat-y;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="常用特殊图形"><a href="#常用特殊图形" class="headerlink" title="常用特殊图形"></a>常用特殊图形</h2>  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 三角形：原理是相邻边框连接处是均分</span></span><br><span class="line"><span class="selector-class">.triangle</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border-top</span>: <span class="number">50px</span> solid black;</span><br><span class="line">    <span class="attribute">border-right</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">    <span class="attribute">border-left</span>: <span class="number">50px</span> solid transparent;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 箭头</span></span><br><span class="line"><span class="selector-class">.border-triangle-top</span>(@brcolor: #fbfdff, @bgcolor: #fff, </span><br><span class="line">@brwidth: <span class="number">8px</span>, @width: <span class="number">100%</span>, @height: <span class="number">40px</span>) &#123;</span><br><span class="line">    <span class="attribute">width</span>: @width;</span><br><span class="line">    <span class="attribute">height</span>: @height;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    &amp;<span class="selector-pseudo">:after</span>,</span><br><span class="line">    &amp;<span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">        <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">        <span class="attribute">position</span>: absolute;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">border</span>: @brwidth solid transparent;</span><br><span class="line">        <span class="attribute">border-bottom-color</span>: @brcolor;</span><br><span class="line">        <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">        <span class="attribute">margin-left</span>: -@brwidth;</span><br><span class="line">        <span class="attribute">top</span>: -@brwidth * <span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    &amp;<span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">        <span class="attribute">border-bottom-color</span>: @bgcolor;</span><br><span class="line">        <span class="attribute">top</span>: -@brwidth * <span class="number">2</span> + <span class="number">1px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.border-triangle-bottom</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">5px</span> <span class="number">#d9d9d9</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">18px</span>;</span><br><span class="line">  </span><br><span class="line">  <span class="selector-tag">span</span>&#123;</span><br><span class="line">        <span class="attribute">display</span>: inline-block;</span><br><span class="line">        <span class="attribute">text-align</span>: left;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">        &amp;<span class="selector-class">.t-left</span>&#123;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    &amp;<span class="selector-pseudo">:after</span>,</span><br><span class="line">    &amp;<span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">        <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">        <span class="attribute">position</span>: absolute;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">border</span>: <span class="number">4px</span> solid transparent;</span><br><span class="line">        <span class="attribute">border-top-color</span>: <span class="number">#d9d9d9</span>;</span><br><span class="line">        <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">        <span class="attribute">margin-left</span>: -<span class="number">4px</span>;</span><br><span class="line">        <span class="attribute">bottom</span>: -<span class="number">8px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    &amp;<span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">        <span class="attribute">border-top-color</span>: <span class="number">#fff</span>;</span><br><span class="line">        <span class="attribute">bottom</span>: -<span class="number">7px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// &lt;div class=&quot;title&quot; data-title=&quot;hello world&quot;&gt;title悬浮框&lt;/div&gt;</span></span><br><span class="line"><span class="selector-class">.title</span> &#123;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.title</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="built_in">attr</span>(data-title);</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: -<span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">left</span>: -<span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 半圆</span></span><br><span class="line"><span class="selector-class">.semi-circle</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">background</span>: red;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50px</span> <span class="number">50px</span> <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 半椭圆</span></span><br><span class="line"><span class="selector-class">.semiellipse</span> &#123;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">background</span>: red;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">100%</span> <span class="number">0</span> <span class="number">0</span> <span class="number">100%</span> /<span class="number">50%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 椭圆</span></span><br><span class="line"><span class="selector-class">.ellipse</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">background</span>: red;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50px</span>/<span class="number">25px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 梯形</span></span><br><span class="line"><span class="selector-class">.echelon</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">600px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">100px</span> solid;</span><br><span class="line">    <span class="attribute">border-color</span>: transparent transparent <span class="number">#c00</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 三栏</span></span><br><span class="line"><span class="selector-class">.three-cols</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">15px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border-top</span>: <span class="number">30px</span> solid;</span><br><span class="line">    <span class="attribute">border-bottom</span>: <span class="number">30px</span> solid;</span><br><span class="line">    <span class="attribute">background-color</span>: currentColor;</span><br><span class="line">    <span class="attribute">background-clip</span>: content-box;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 多层阴影</span></span><br><span class="line"><span class="selector-class">.shadows</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">5px</span> solid black;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> green,<span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 眼睛</span></span><br><span class="line"><span class="selector-class">.eye</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">10px</span> solid;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: currentColor;</span><br><span class="line">    <span class="attribute">background-clip</span>: content-box;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 放大镜</span></span><br><span class="line"><span class="selector-class">.magnifier</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">5px</span> solid <span class="number">#333</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.magnifier</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="attribute">display</span>: block;    </span><br><span class="line">    <span class="attribute">width</span>: <span class="number">8px</span>;    </span><br><span class="line">    <span class="attribute">height</span>: <span class="number">60px</span>;    </span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;    </span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#333</span>;    </span><br><span class="line">    <span class="attribute">position</span>: absolute;    </span><br><span class="line">    <span class="attribute">right</span>: -<span class="number">22px</span>;    </span><br><span class="line">    <span class="attribute">top</span>: <span class="number">38px</span>;    </span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">45deg</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 搜索框：聚焦时变长 &lt;input class=&quot;search&quot; type=&quot;text&quot;&gt;</span></span><br><span class="line"><span class="selector-class">.search</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">80px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid lightblue;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">outline</span>: none;</span><br><span class="line">    <span class="attribute">text-indent</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    -webkit-<span class="attribute">transition</span>: width <span class="number">0.5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.search</span><span class="selector-pseudo">:focus</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 卡券效果 &lt;p class=&quot;coupon&quot;&gt;&lt;span&gt;200&lt;/span&gt;优惠券&lt;/p&gt;</span></span><br><span class="line"><span class="selector-class">.coupon</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">50px</span> auto;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">filter</span>: <span class="built_in">drop-shadow</span>(<span class="number">2px</span> <span class="number">2px</span> <span class="number">2px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">2</span>));</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">radial-gradient</span>(circle at right bottom, </span><br><span class="line">      transparent <span class="number">10px</span>, <span class="number">#ffffff</span> <span class="number">0</span>) top right /<span class="number">50%</span> <span class="number">51px</span> no-repeat,</span><br><span class="line">      <span class="built_in">radial-gradient</span>(circle at left bottom, transparent <span class="number">10px</span>, <span class="number">#ffffff</span> <span class="number">0</span>) </span><br><span class="line">      top left / <span class="number">50%</span> <span class="number">51px</span> no-repeat,</span><br><span class="line">      <span class="built_in">radial-gradient</span>(circle at right top, transparent <span class="number">10px</span>, <span class="number">#ffffff</span> <span class="number">0</span>) </span><br><span class="line">      bottom right / <span class="number">50%</span> <span class="number">51px</span> no-repeat,</span><br><span class="line">      <span class="built_in">radial-gradient</span>(circle at left top, transparent <span class="number">10px</span>, <span class="number">#ffffff</span> <span class="number">0</span>) </span><br><span class="line">      bottom left / <span class="number">50%</span> <span class="number">51px</span> no-repeat;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coupon</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>: <span class="number">400</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h1 id="三、Mobile-样式"><a href="#三、Mobile-样式" class="headerlink" title="三、Mobile 样式"></a>三、Mobile 样式</h1><h2 id="reset-css"><a href="#reset-css" class="headerlink" title="reset.css"></a>reset.css</h2>  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span>&#123;</span><br><span class="line">    -webkit-text-size-adjust: none;</span><br><span class="line">    <span class="comment">/* 禁用长按选中、复制文本功能 */</span></span><br><span class="line">    -webkit-user-select: none;</span><br><span class="line">    -webkit-touch-callout: none;</span><br><span class="line">    <span class="comment">/* 取消可点击元素点击时的背景色 */</span></span><br><span class="line">    -webkit-tap-highlight-<span class="attribute">color</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#fbfbfb</span>;</span><br><span class="line">    -webkit-<span class="attribute">overflow</span>-scrolling: touch;  <span class="comment">/* 滚动条上下拉动时卡顿 */</span></span><br><span class="line">    <span class="attribute">font-family</span>: -apple-system, BlinkMacSystemFont, <span class="string">&quot;PingFang SC&quot;</span>,</span><br><span class="line">    <span class="string">&quot;Helvetica Neue&quot;</span>,STHeiti,<span class="string">&quot;Microsoft Yahei&quot;</span>,Tahoma,Simsun,sans-serif;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span>,<span class="selector-tag">h1</span>,<span class="selector-tag">h2</span>,<span class="selector-tag">h3</span>,<span class="selector-tag">h4</span>,<span class="selector-tag">h5</span>,<span class="selector-tag">h6</span>,<span class="selector-tag">p</span>,<span class="selector-tag">dl</span>,<span class="selector-tag">dd</span>,<span class="selector-tag">ul</span>,<span class="selector-tag">ol</span>,</span><br><span class="line">pre,<span class="selector-tag">form</span>,<span class="selector-tag">input</span>,<span class="selector-tag">textarea</span>,<span class="selector-tag">th</span>,<span class="selector-tag">td</span>,select &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>; </span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>; </span><br><span class="line">    <span class="attribute">text-indent</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>: normal;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span>&#123;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 取消聚焦高亮效果 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:focus</span>, <span class="selector-tag">button</span><span class="selector-pseudo">:focus</span>, <span class="selector-tag">input</span><span class="selector-pseudo">:focus</span>, <span class="selector-tag">textarea</span><span class="selector-pseudo">:focus</span>&#123;</span><br><span class="line">    <span class="attribute">outline</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ol</span>,<span class="selector-tag">ul</span>,<span class="selector-tag">li</span>&#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">list-style</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">img</span>, <span class="selector-tag">input</span>, <span class="selector-tag">button</span>&#123;</span><br><span class="line">    <span class="attribute">border</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">textarea</span>&#123; </span><br><span class="line">    <span class="attribute">resize</span>: none; </span><br><span class="line">    <span class="attribute">overflow</span>: auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">button</span><span class="selector-pseudo">:disabled</span> &#123;</span><br><span class="line">    <span class="attribute">opacity</span>: .<span class="number">65</span>;    </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">input</span>::-webkit-input-placeholder,</span><br><span class="line">textarea::-webkit-input-placeholder&#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#999</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span>:-moz-placeholder,</span><br><span class="line">textarea:-moz-placeholder&#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#999</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span>:-ms-input-placeholder,</span><br><span class="line">textarea:-ms-input-placeholder&#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#999</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">button</span>,</span><br><span class="line"><span class="selector-tag">input</span>,</span><br><span class="line"><span class="selector-tag">textarea</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: inherit;</span><br><span class="line">    <span class="attribute">font</span>: inherit;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:disabled</span>, </span><br><span class="line"><span class="selector-tag">textarea</span><span class="selector-pseudo">:disabled</span> &#123;</span><br><span class="line">    -webkit-text-fill-<span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line">    -webkit-<span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.shadow</span>&#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">6px</span> <span class="number">6px</span> <span class="number">#c8c8c8</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 隐藏滚动条 */</span></span><br><span class="line">::-webkit-scrollbar &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">background</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 开启硬件加速，解决页面闪白，保证动画流畅 */</span></span><br><span class="line"><span class="selector-class">.animation</span> &#123; </span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="媒体查询"><a href="#媒体查询" class="headerlink" title="媒体查询"></a>媒体查询</h2>  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* rem 配置 */</span></span><br><span class="line"><span class="selector-tag">html</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">10px</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>:<span class="number">321px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>:<span class="number">375px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">html</span>&#123; <span class="attribute">font-size</span>: <span class="number">11px</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>:<span class="number">376px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>:<span class="number">414px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">html</span>&#123; <span class="attribute">font-size</span>: <span class="number">12px</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>:<span class="number">415px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>:<span class="number">639px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">html</span>&#123; <span class="attribute">font-size</span>: <span class="number">15px</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>:<span class="number">640px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>:<span class="number">719px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">html</span>&#123; <span class="attribute">font-size</span>: <span class="number">20px</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>:<span class="number">720px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>:<span class="number">749px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">html</span>&#123; <span class="attribute">font-size</span>: <span class="number">22.5px</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>:<span class="number">750px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>:<span class="number">799px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">html</span>&#123; <span class="attribute">font-size</span>: <span class="number">23.5px</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>:<span class="number">800px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">html</span>&#123; <span class="attribute">font-size</span>: <span class="number">25px</span> &#125; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 竖屏时的样式 */</span></span><br><span class="line"><span class="keyword">@media</span> all <span class="keyword">and</span> (<span class="attribute">orientation</span>:portrait)&#123;   &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 横屏时的样式 */</span></span><br><span class="line"><span class="keyword">@media</span> all <span class="keyword">and</span> (<span class="attribute">orientation</span>:landscape)&#123;   &#125;</span><br></pre></td></tr></table></figure>


<h2 id="表单标签"><a href="#表单标签" class="headerlink" title="表单标签"></a>表单标签</h2>  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* input placeholder 出现文本位置偏上 */</span></span><br><span class="line"><span class="selector-tag">input</span>&#123;</span><br><span class="line">    <span class="attribute">line-height</span>: normal;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 输入框 placeholder 的颜色值改变 */</span></span><br><span class="line">::-webkit-input-placeholder &#123;  </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#999</span>; </span><br><span class="line">&#125;</span><br><span class="line">:-moz-placeholder &#123;  </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#999</span>; </span><br><span class="line">&#125;</span><br><span class="line">::-moz-placeholder &#123;  </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#999</span>; </span><br><span class="line">&#125;</span><br><span class="line">:-ms-input-placeholder &#123;  </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#999</span>; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:focus</span>::-webkit-input-placeholder&#123; </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#999</span>; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* IOS Input Disabled 默认样式问题 */</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:disabled</span>, <span class="selector-tag">textarea</span><span class="selector-pseudo">:disabled</span> &#123;</span><br><span class="line">    -webkit-text-fill-<span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">    -webkit-<span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 改变选中内容的背景颜色：字体颜色换成 color */</span></span><br><span class="line"><span class="selector-pseudo">::selection</span> &#123; </span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#FFF</span>; </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#333</span>; </span><br><span class="line">&#125; </span><br><span class="line">::-moz-selection &#123; </span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#FFF</span>; </span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#333</span>; </span><br><span class="line">&#125; </span><br><span class="line">::-webkit-selection &#123; </span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#FFF</span>; </span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#333</span>; </span><br><span class="line">&#125; </span><br><span class="line"></span><br><span class="line"><span class="comment">/* 禁用 select 默认下拉箭头 */</span></span><br><span class="line">select::-ms-expand &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 禁用 radio 和 checkbox 默认样式 */</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=radio]</span>::-ms-check, </span><br><span class="line">input[type=checkbox]::-ms-check</span><br><span class="line">&#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 禁用表单输入框默认清除按钮 */</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=text]</span>::-ms-clear,</span><br><span class="line">input[type=tel]::-ms-clear,</span><br><span class="line">input[type=number]::-ms-clear &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 重置默认外观 */</span></span><br><span class="line"><span class="selector-tag">input</span>, select &#123; </span><br><span class="line">    <span class="comment">/* 清除默认内阴影 */</span></span><br><span class="line">    -webkit-appearance:none; </span><br><span class="line">    appearance: none; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 禁止winphone默认触摸事件 (e.preventDefault无效) */</span></span><br><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">    -ms-touch-action: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="1px-border"><a href="#1px-border" class="headerlink" title="1px border"></a>1px border</h2>  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 法一</span></span><br><span class="line"><span class="selector-class">.border_1px</span> &#123;</span><br><span class="line">    <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">-webkit-min-device-pixel-ratio</span>: <span class="number">2</span>) &#123;</span><br><span class="line">    <span class="selector-class">.border_1px</span> &#123;</span><br><span class="line">        <span class="attribute">border-bottom</span>: none;</span><br><span class="line">        <span class="attribute">border-width</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">border-image</span>: <span class="built_in">url</span>(../img/<span class="number">1px</span>line.png) <span class="number">0</span> <span class="number">0</span> <span class="number">2</span> <span class="number">0</span> stretch;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 法二</span></span><br><span class="line"><span class="selector-class">.border_1px</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.border_1px</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>:<span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">1px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#000</span>;</span><br><span class="line">    <span class="attribute">transform-origin</span>: <span class="number">50%</span> <span class="number">0%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">-webkit-min-device-pixel-ratio</span>: <span class="number">2</span>) &#123;</span><br><span class="line">    <span class="selector-class">.border_1px</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">scaleY</span>(<span class="number">0.5</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">-webkit-min-device-pixel-ratio</span>: <span class="number">3</span>) &#123;</span><br><span class="line">    <span class="selector-class">.border_1px</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">scaleY</span>(<span class="number">0.33</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 单一边框</span></span><br><span class="line"><span class="selector-class">.hair-line</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.hair-line</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200%</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200%</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#dcdcdc</span>;</span><br><span class="line">    <span class="attribute">border-style</span>: solid;</span><br><span class="line">    <span class="attribute">border-width</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0.5</span>);</span><br><span class="line">    <span class="attribute">transform-origin</span>: <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.hair-line--b</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">border-bottom-width</span>: <span class="number">1px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.hair-line--t</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">border-top-width</span>: <span class="number">1px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.hair-line--r</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">border-right-width</span>: <span class="number">1px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.hair-line--l</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">border-left-width</span>: <span class="number">1px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.hair-line--a</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">border-width</span>: <span class="number">1px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h1 id="四、Scss-预处理"><a href="#四、Scss-预处理" class="headerlink" title="四、Scss 预处理"></a>四、Scss 预处理</h1><blockquote>
<p>用于新增 css 编程特性并提高代码的可维护性，目前主流的预处理器有 Scss (Sass 升级版)、Less (更容易上手但编程功能不够)、Stylus (用于 Node 项目)。</p>
</blockquote>
<h2 id="基础语法"><a href="#基础语法" class="headerlink" title="基础语法"></a>基础语法</h2>  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、引用文件</span></span><br><span class="line"><span class="variable">$device</span>: mobile;</span><br><span class="line"><span class="keyword">@import</span> <span class="string">&quot;index.css&quot;</span>, <span class="string">&quot;index2.scss&quot;</span>;   <span class="comment">// 导入多个文件</span></span><br><span class="line"><span class="keyword">@import</span> <span class="string">&quot;http://foo.com/bar&quot;</span>;</span><br><span class="line"><span class="keyword">@import</span> url(foo);</span><br><span class="line"><span class="keyword">@import</span> <span class="string">&quot;_index.scss&quot;</span>;  <span class="comment">// 避免引入文件被编译</span></span><br><span class="line"><span class="keyword">@import</span> <span class="string">&quot;colors&quot;</span>;</span><br><span class="line"><span class="variable">$device</span>: mobile;</span><br><span class="line"><span class="keyword">@import</span> url(styles.#&#123;<span class="variable">$device</span>&#125;<span class="selector-class">.css</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、注释</span></span><br><span class="line"><span class="comment">//  单行注释(不会被编译到css文件中);</span></span><br><span class="line"><span class="comment">/*  多行注释(在非压缩模式下会被编译到css文件中)  */</span></span><br><span class="line"><span class="comment">/*! 重要注释(各种压缩模式下都会被编译到css文件中)  */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * @title 3、变量</span></span><br><span class="line"><span class="comment"> * @param 变量名：以 $ 开头，可用作选择器/属性(值)/字符串。</span></span><br><span class="line"><span class="comment"> * @param 变量值：数字、字符串、布尔值、空值、List、Map。</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line"><span class="variable">$width</span>: <span class="number">1px</span>;             <span class="comment">// 全局变量(定义在选择器外) </span></span><br><span class="line"><span class="variable">$width2</span>: <span class="number">3px</span> !default;   <span class="comment">// 默认变量(无值时起作用)</span></span><br><span class="line"><span class="variable">$pos</span>: bottom;</span><br><span class="line"><span class="selector-class">.aa</span> &#123;</span><br><span class="line">    <span class="variable">$fs</span>: <span class="number">14px</span>;           <span class="comment">// 局部变量(定义在选择器内)</span></span><br><span class="line">    <span class="variable">$lh</span>: <span class="number">1.5</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="variable">$width</span>;                  <span class="comment">// 常规使用($var)</span></span><br><span class="line">    <span class="attribute">border</span>-#&#123;<span class="variable">$pos</span>&#125;: <span class="number">1px</span> solid red;  <span class="comment">// 拼字符串(#&#123;$var&#125;)</span></span><br><span class="line">    <span class="attribute">font</span>: #&#123;<span class="variable">$fs</span>&#125;/#&#123;lh&#125; sans-serif;  <span class="comment">// 复杂属性值(#&#123;$var&#125;)</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bb</span> &#123;</span><br><span class="line">    <span class="variable">$width</span>: <span class="number">3px</span> !global;            <span class="comment">// 覆盖全局变量</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="variable">$width</span> + <span class="variable">$width2</span>;        <span class="comment">// 用于计算($var + $var)</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@mixin</span> link-style(<span class="variable">$sel</span>) &#123;</span><br><span class="line">    <span class="selector-tag">li</span> #&#123;<span class="variable">$sel</span>&#125; &#123;                    <span class="comment">// 作为选择器(#&#123;$var&#125;)</span></span><br><span class="line">        <span class="attribute">color</span>: red;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@include</span> link-style(<span class="string">&quot;a&quot;</span>);</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="comment">// 3、嵌套</span></span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="selector-tag">p</span> &#123; <span class="attribute">color</span>: green; &#125;</span><br><span class="line">    <span class="comment">// 选择器嵌套：&amp; 引用父元素、@at-root 让选择器跳出根元素</span></span><br><span class="line">    &amp;<span class="selector-pseudo">:hover</span> &#123; <span class="attribute">color</span>: blue; &#125;</span><br><span class="line">    <span class="keyword">@at-root</span> .d &#123; <span class="attribute">color</span>: green; &#125;</span><br><span class="line">    <span class="comment">// 属性嵌套：属性后须写冒号</span></span><br><span class="line">    <span class="attribute">border</span>: &#123;   </span><br><span class="line">        style: solid;</span><br><span class="line">        <span class="attribute">left</span>: &#123; <span class="attribute">width</span>: <span class="number">4px</span>; <span class="attribute">color</span>: <span class="number">#888</span>; &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4、@mixin 混合：定义可重用的代码段并通过 @include 调用  </span></span><br><span class="line"><span class="comment">// 无参</span></span><br><span class="line"><span class="keyword">@mixin</span> aa &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bb</span> &#123;</span><br><span class="line">    <span class="keyword">@include</span> aa;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 参数为数组 </span></span><br><span class="line"><span class="variable">$margin</span>: <span class="number">100px</span>;</span><br><span class="line"><span class="variable">$left</span>: <span class="number">10px</span>;</span><br><span class="line"><span class="keyword">@mixin</span> aa(<span class="variable">$left</span>, <span class="variable">$margin</span>) &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="variable">$margin</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="variable">$left</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bb</span> &#123;</span><br><span class="line">    <span class="keyword">@include</span> aa(<span class="variable">$left</span>, <span class="variable">$margin</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 参数为对象 </span></span><br><span class="line"><span class="variable">$map</span>: (left: <span class="number">10px</span>, width: <span class="number">100px</span>);</span><br><span class="line"><span class="keyword">@mixin</span> aa(<span class="variable">$left</span>, <span class="variable">$width</span>) &#123;</span><br><span class="line">    <span class="comment">// 接收参数为key值</span></span><br><span class="line">    <span class="attribute">left</span>: <span class="variable">$left</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="variable">$width</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="keyword">@include</span> aa(<span class="variable">$map</span>...);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 默认参数(不传参数时会用默认参数)</span></span><br><span class="line"><span class="keyword">@mixin</span> aa(<span class="variable">$left</span>: <span class="number">10px</span>) &#123;&#125;</span><br><span class="line"><span class="comment">// 不定参数 </span></span><br><span class="line"><span class="keyword">@mixin</span> box-shadow(<span class="variable">$shadows</span>...) &#123;</span><br><span class="line">    -moz-<span class="attribute">box-shadow</span>: <span class="variable">$shadows</span>;</span><br><span class="line">    -webkit-<span class="attribute">box-shadow</span>: <span class="variable">$shadows</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="variable">$shadows</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.shadows</span> &#123;</span><br><span class="line">    <span class="keyword">@include</span> box-shadow(<span class="number">2px</span> <span class="number">2px</span> <span class="number">2px</span> <span class="number">#eee</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 浏览器前缀</span></span><br><span class="line"><span class="keyword">@mixin</span> rounded(<span class="variable">$vert</span>, <span class="variable">$horz</span>, <span class="variable">$radius</span>: <span class="number">10px</span>) &#123;</span><br><span class="line">    <span class="attribute">border</span>-#&#123;<span class="variable">$vert</span>&#125;-#&#123;<span class="variable">$horz</span>&#125;-radius: <span class="variable">$radius</span>;</span><br><span class="line">    -moz-<span class="attribute">border-radius</span>-#&#123;<span class="variable">$vert</span>&#125;#&#123;<span class="variable">$horz</span>&#125;: <span class="variable">$radius</span>;</span><br><span class="line">    -webkit-<span class="attribute">border</span>-#&#123;<span class="variable">$vert</span>&#125;-#&#123;<span class="variable">$horz</span>&#125;-radius: <span class="variable">$radius</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#navbar</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="keyword">@include</span> rounded(top, left);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#footer</span> &#123;</span><br><span class="line">    <span class="keyword">@include</span> rounded(top, left, <span class="number">5px</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 5、@extend 继承：不管是否调用，基类样式都将会出现在编译的 CSS 代码 </span></span><br><span class="line"><span class="selector-class">.btn</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.btn-bor</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.btn-red</span> &#123;</span><br><span class="line">    <span class="keyword">@extend</span> .btn;   <span class="comment">// 多个扩展</span></span><br><span class="line">    <span class="keyword">@extend</span> .btn-bor !optional;  <span class="comment">// 跳过空样式而防止元素不存在而报错</span></span><br><span class="line">    <span class="attribute">border-color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.hoverlink</span> &#123;</span><br><span class="line">    <span class="keyword">@extend</span> <span class="attribute">a</span>:<span class="attribute">hover</span>;   <span class="comment">// @extend可扩展任何选择器</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">text-decoration</span>: underline;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 配合占位选择器 (% 扩展单一选择器，编译后不在 css)</span></span><br><span class="line"><span class="selector-class">.container</span> <span class="selector-tag">div</span>%box &#123;</span><br><span class="line">    -webkit-<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">    -moz-<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">    <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bor-box</span> &#123;</span><br><span class="line">    <span class="keyword">@extend</span> %box;  <span class="comment">// 此时才会编译产生</span></span><br><span class="line">&#125; </span><br><span class="line"><span class="comment">// 编译为 .container div.bor-box &#123; &#125; </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 6、%placeholder 占位符：独立定义的声明块，不调用时不会编译生成 CSS </span></span><br><span class="line">%mt&#123;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">5px</span>;  </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.block</span> &#123;</span><br><span class="line">    <span class="keyword">@extend</span> %mt;</span><br><span class="line">    <span class="selector-tag">span</span> &#123;</span><br><span class="line">        <span class="attribute">display</span>: block;</span><br><span class="line">        <span class="keyword">@extend</span> %mt;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.header</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: orange;</span><br><span class="line">    <span class="keyword">@extend</span> %mt;</span><br><span class="line">    <span class="selector-tag">span</span> &#123;</span><br><span class="line">        <span class="attribute">display</span>:block;</span><br><span class="line">        <span class="keyword">@extend</span> %mt;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h2 id="进阶语法"><a href="#进阶语法" class="headerlink" title="进阶语法"></a>进阶语法</h2>  <figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * @title 1、条件判断</span></span><br><span class="line"><span class="comment"> * @param 可单独使用或结合 @else (if) 使用</span></span><br><span class="line"><span class="comment"> * @param 使用 not/or/and 分别表示非/或/与，比如 @if not($var)</span></span><br><span class="line"><span class="comment"> * @param 使用 !=/== 分别表示(不)等于，如 @if $a !=0 </span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line"><span class="keyword">@mixin</span> blockOrHidden(<span class="variable">$boolean</span>:true) &#123;</span><br><span class="line">    <span class="keyword">@if</span> <span class="variable">$boolean</span> &#123;</span><br><span class="line">        <span class="keyword">@debug</span> <span class="string">&quot;$boolean is #&#123;$boolean&#125;&quot;</span>;</span><br><span class="line">        <span class="attribute">display</span>: block; <span class="comment">//参数为真，显示</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">@else</span> &#123;</span><br><span class="line">        <span class="keyword">@debug</span> <span class="string">&quot;$boolean is #&#123;$boolean&#125;&quot;</span>;</span><br><span class="line">        <span class="attribute">display</span>: none; <span class="comment">//参数为假，不显示</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.block</span> &#123;</span><br><span class="line">    <span class="keyword">@include</span> blockOrHidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.hidden</span> &#123;</span><br><span class="line">    <span class="keyword">@include</span> blockOrHidden(false);</span><br><span class="line">&#125; </span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、循环 list (用空格或逗号隔开项))、map (键值对)</span></span><br><span class="line"><span class="variable">$name</span>: <span class="string">&quot;a&quot;</span>, <span class="string">&quot;b&quot;</span>;</span><br><span class="line"><span class="variable">$px</span>: <span class="number">5px</span> <span class="number">10px</span> <span class="number">15px</span> <span class="number">20px</span>; </span><br><span class="line"><span class="variable">$sel2</span>: (sel1: <span class="string">&quot;span&quot;</span>, sel2: <span class="string">&quot;div&quot;</span>) </span><br><span class="line"></span><br><span class="line"><span class="variable">$map</span>: (key1: <span class="number">1</span>, key2: <span class="number">2</span>, key3: <span class="number">3</span>);</span><br><span class="line">  </span><br><span class="line"><span class="keyword">@for</span> <span class="variable">$var</span> from &lt;start&gt; through &lt;end&gt; // 包含 end 值</span><br><span class="line"><span class="keyword">@for</span> <span class="variable">$var</span> from &lt;start&gt; to &lt;end&gt;      // 不包含 end 值</span><br><span class="line">  </span><br><span class="line"><span class="keyword">@each</span> <span class="variable">$var</span> in list/map</span><br><span class="line"></span><br><span class="line"><span class="variable">$i</span>: <span class="number">2</span>;</span><br><span class="line"><span class="keyword">@while</span> <span class="variable">$i</span>&gt;<span class="number">0</span> &#123;   	<span class="comment">// 条件为 true 就会执行</span></span><br><span class="line">    <span class="selector-class">.color</span>#&#123;<span class="variable">$i</span>&#125; &#123;</span><br><span class="line">      <span class="attribute">color</span>: <span class="number">#222</span> * <span class="variable">$i</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable">$i</span>:<span class="variable">$i</span> - <span class="number">1</span>;     <span class="comment">// 不能写成 $i:$i-1，因为会被当成字符串</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable">$arr</span>: ( (theme: dark, size: <span class="number">40px</span>), </span><br><span class="line">    (theme: light, size: <span class="number">32px</span>)</span><br><span class="line">);</span><br><span class="line"><span class="keyword">@for</span> <span class="variable">$i</span> from <span class="number">1</span> through length(<span class="variable">$arr</span>) &#123;</span><br><span class="line">    <span class="variable">$item</span>: <span class="built_in">nth</span>(<span class="variable">$arr</span>, <span class="variable">$i</span>);             <span class="comment">// 获取数组中第i项的值</span></span><br><span class="line">    .#&#123;<span class="built_in">map-get</span>($item, theme)&#125; &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="built_in">map-get</span>(<span class="variable">$item</span>, size);  <span class="comment">// 获取指定键值</span></span><br><span class="line">        <span class="attribute">height</span>: <span class="built_in">map-get</span>(<span class="variable">$item</span>, size);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable">$margins</span>: <span class="number">5px</span> <span class="number">10px</span>, <span class="number">15px</span> <span class="number">20px</span>;    <span class="comment">// 两个项</span></span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="built_in">nth</span>(<span class="variable">$margins</span>, <span class="number">1</span>) <span class="built_in">nth</span>(<span class="variable">$margins</span>, <span class="number">2</span>);</span><br><span class="line">    <span class="attribute">padding</span>: <span class="built_in">nth</span>(<span class="variable">$margins</span>, <span class="number">1</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable">$sel2</span>: (sel1: <span class="string">&quot;span&quot;</span>, sel2: <span class="string">&quot;div&quot;</span>);  <span class="comment">// Map形式</span></span><br><span class="line"><span class="keyword">@each</span> <span class="variable">$s</span> in <span class="variable">$sel2</span> &#123;</span><br><span class="line">    .#&#123;<span class="variable">$s</span>&#125; &#123;</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable">$headers</span>: (h1:<span class="number">2em</span>, h2:<span class="number">1.5em</span>, h3:<span class="number">1.2em</span>);</span><br><span class="line"><span class="keyword">@each</span> <span class="variable">$header</span>, <span class="variable">$size</span> in <span class="variable">$headers</span> &#123;</span><br><span class="line">    #&#123;<span class="variable">$header</span>&#125; &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="variable">$size</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * @title 3、函数和运算</span></span><br><span class="line"><span class="comment"> * @param 自定义：@fuction 定义，@return 返回结果</span></span><br><span class="line"><span class="comment"> * @param 三元条件：if($condition, $if-true, $if-false)</span></span><br><span class="line"><span class="comment"> * @param 运算方法：颜色、数字、字符串、Map、List、Introspection</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line"><span class="keyword">@function</span> colors(<span class="variable">$color</span>) &#123;</span><br><span class="line">    <span class="variable">$names</span>: <span class="built_in">map-keys</span>(<span class="variable">$social-colors</span>);</span><br><span class="line">    <span class="keyword">@if</span> <span class="keyword">not</span> index(<span class="variable">$names</span>, <span class="variable">$color</span>) &#123;</span><br><span class="line">        <span class="keyword">@warn</span> <span class="string">&quot;Waring: `#&#123;$color&#125; is not a valid color name.`&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">@return</span> map-get(<span class="variable">$social-colors</span>, <span class="variable">$color</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.btn-weibo</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">colors</span>(weibo);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable">$social-colors</span>: (</span><br><span class="line">    dribble: <span class="number">#ea4c89</span>,</span><br><span class="line">    facebook: <span class="number">#3b5998</span>,</span><br><span class="line">    github: <span class="number">#171515</span>,</span><br><span class="line">    google: <span class="number">#db4437</span>,</span><br><span class="line">    twitter: <span class="number">#55acee</span></span><br><span class="line">);</span><br><span class="line"><span class="keyword">@each</span> <span class="variable">$name</span> in map-keys(<span class="variable">$social-colors</span>) &#123;</span><br><span class="line">    <span class="selector-class">.btn-</span>#&#123;<span class="variable">$name</span>&#125; &#123;</span><br><span class="line">        <span class="attribute">color</span>: <span class="built_in">colors</span>(<span class="variable">$name</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@for</span> <span class="variable">$i</span> from <span class="number">1</span> through length(map-keys(<span class="variable">$social-colors</span>)) &#123;</span><br><span class="line">    <span class="selector-class">.btn-</span>#&#123;<span class="built_in">nth</span>(map-keys($social-colors), <span class="variable">$i</span>)&#125; &#123;</span><br><span class="line">        <span class="attribute">color</span>: <span class="built_in">colors</span>(<span class="built_in">nth</span>(<span class="built_in">map-keys</span>(<span class="variable">$social-colors</span>), <span class="variable">$i</span>));</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4、调试：类似于控制台输出信息</span></span><br><span class="line"><span class="keyword">@debug</span> <span class="string">&#x27;This is adebug&#x27;</span>;</span><br><span class="line"><span class="keyword">@warn</span> <span class="string">&#x27;Warn&#x27;</span>;</span><br><span class="line"><span class="keyword">@error</span> <span class="string">&#x27;Error&#x27;</span>;</span><br></pre></td></tr></table></figure>


<h2 id="相关插件"><a href="#相关插件" class="headerlink" title="相关插件"></a>相关插件</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、stylelint 样式代码检查：根目录新建 gulpfile.js</span></span><br><span class="line">npm install gulp stylelint gulp-postscss postcss-reporter </span><br><span class="line">stylelint-config-standard --save-dev</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reporter = <span class="built_in">require</span>(<span class="string">&#x27;postcss-reporter&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> stylelint = <span class="built_in">require</span>(<span class="string">&#x27;stylelint&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> stylelintConfig = &#123;</span><br><span class="line">    <span class="string">&#x27;extends&#x27;</span>: <span class="string">&#x27;stylelint-config-standard&#x27;</span>,  </span><br><span class="line">    <span class="string">&#x27;rules&#x27;</span>: &#123;    </span><br><span class="line">        <span class="string">&#x27;at-rule-no-unknown&#x27;</span>: [</span><br><span class="line">            <span class="literal">true</span>, </span><br><span class="line">            &#123;<span class="string">&#x27;ignoreAtRules&#x27;</span>: [<span class="string">&#x27;extend&#x27;</span>, <span class="string">&#x27;include&#x27;</span>, <span class="string">&#x27;mixin&#x27;</span>, <span class="string">&#x27;for&#x27;</span>]&#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&#x27;scss-lint&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123; </span><br><span class="line">    <span class="keyword">var</span> processors = [    </span><br><span class="line">        <span class="title function_">stylelint</span>(stylelintConfig),    </span><br><span class="line">        <span class="title function_">reporter</span>(&#123; <span class="attr">clearMessages</span>: <span class="literal">true</span>, <span class="attr">throwError</span>: <span class="literal">true</span> &#125;)  </span><br><span class="line">    ];  </span><br><span class="line">    <span class="keyword">return</span> gulp.<span class="title function_">src</span>([<span class="string">&#x27;src/style/*.scss&#x27;</span>]).<span class="title function_">pipe</span>(<span class="title function_">postcss</span>(processors));</span><br><span class="line">&#125;);</span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&#x27;default&#x27;</span>, [<span class="string">&#x27;scss-lint&#x27;</span>]);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、stylefmt 样式自动修复：基于 stylelint 代码规范</span></span><br><span class="line"><span class="keyword">var</span> stylefmt = <span class="built_in">require</span>(<span class="string">&#x27;gulp-stylefmt&#x27;</span>);</span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&#x27;stylefmt&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> gulp.<span class="title function_">src</span>([<span class="string">&#x27;src/style/student/index.scss&#x27;</span>])</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">stylefmt</span>(stylelintConfig))</span><br><span class="line">    .<span class="title function_">pipe</span>(gulp.<span class="title function_">dest</span>(<span class="string">&#x27;src/style/dest/student&#x27;</span>));</span><br><span class="line">&#125;);</span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&#x27;fix&#x27;</span>, [<span class="string">&#x27;stylefmt&#x27;</span>]);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、gulp-sass 编译 scss 语法</span></span><br><span class="line"><span class="keyword">var</span> gulpsass = <span class="built_in">require</span>(<span class="string">&#x27;gulp-sass&#x27;</span>);</span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&#x27;gulpsass&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> gulp.<span class="title function_">src</span>(<span class="string">&#x27;src/style/components/hwIcon.scss&#x27;</span>)    </span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">gulpsass</span>().<span class="title function_">on</span>(<span class="string">&#x27;error&#x27;</span>, gulpsass.<span class="property">logError</span>))   </span><br><span class="line">    .<span class="title function_">pipe</span>(gulp.<span class="title function_">dest</span>(<span class="string">&#x27;src/style/dest&#x27;</span>));</span><br><span class="line">&#125;);</span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&#x27;watch&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    gulp.<span class="title function_">watch</span>(<span class="string">&#x27;src/style/components/hwIcon.scss&#x27;</span>, [<span class="string">&#x27;gulpsass&#x27;</span>]);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>




    </div>

    
    
    <div>
      
        <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;margin-top:20px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    
</div>

      
    </div>
    
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>chuangges
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://chuangges.gitee.io/2019/05/08/3-2-css/" title="CSS 样式">https://chuangges.gitee.io/2019/05/08/3-2-css/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh_CN" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2019/05/06/3-1-html/" rel="prev" title="HTML 元素">
      <i class="fa fa-chevron-left"></i> HTML 元素
    </a></div>
      <div class="post-nav-item">
    <a href="/2019/05/15/4-1-js%E5%9F%BA%E7%A1%80/" rel="next" title="JS 主要内容">
      JS 主要内容 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80%E3%80%81CSS-%E5%B8%B8%E7%94%A8"><span class="nav-number">1.</span> <span class="nav-text">一、CSS 常用</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9"><span class="nav-number">1.1.</span> <span class="nav-text">浏览器兼容</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css-%E5%8D%95%E4%BD%8D"><span class="nav-number">1.2.</span> <span class="nav-text">css 单位</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#transform-%E5%8F%98%E6%8D%A2"><span class="nav-number">1.3.</span> <span class="nav-text">transform 变换</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#transition-%E8%BF%87%E6%B8%A1"><span class="nav-number">1.4.</span> <span class="nav-text">transition 过渡</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#animation-%E5%8A%A8%E7%94%BB"><span class="nav-number">1.5.</span> <span class="nav-text">animation 动画</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F"><span class="nav-number">1.6.</span> <span class="nav-text">组件样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%96%B0%E5%A2%9E%E7%89%B9%E6%80%A7"><span class="nav-number">1.7.</span> <span class="nav-text">新增特性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Loading"><span class="nav-number">1.8.</span> <span class="nav-text">Loading</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%8C%E3%80%81PC-%E6%A0%B7%E5%BC%8F"><span class="nav-number">2.</span> <span class="nav-text">二、PC 样式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96"><span class="nav-number">2.1.</span> <span class="nav-text">初始化</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%BB%9A%E5%8A%A8%E6%9D%A1"><span class="nav-number">2.2.</span> <span class="nav-text">滚动条</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%83%E7%B4%A0%E5%B1%85%E4%B8%AD"><span class="nav-number">2.3.</span> <span class="nav-text">元素居中</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%83%E5%B1%80%E6%96%B9%E5%BC%8F"><span class="nav-number">2.4.</span> <span class="nav-text">布局方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80"><span class="nav-number">2.5.</span> <span class="nav-text">瀑布流布局</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0"><span class="nav-number">2.6.</span> <span class="nav-text">表单元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90"><span class="nav-number">2.7.</span> <span class="nav-text">文本对齐</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%96%87%E6%9C%AC%E8%B6%85%E5%87%BA%E7%9C%81%E7%95%A5"><span class="nav-number">2.8.</span> <span class="nav-text">文本超出省略</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2"><span class="nav-number">2.9.</span> <span class="nav-text">常用特殊图形</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89%E3%80%81Mobile-%E6%A0%B7%E5%BC%8F"><span class="nav-number">3.</span> <span class="nav-text">三、Mobile 样式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#reset-css"><span class="nav-number">3.1.</span> <span class="nav-text">reset.css</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2"><span class="nav-number">3.2.</span> <span class="nav-text">媒体查询</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE"><span class="nav-number">3.3.</span> <span class="nav-text">表单标签</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1px-border"><span class="nav-number">3.4.</span> <span class="nav-text">1px border</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9B%9B%E3%80%81Scss-%E9%A2%84%E5%A4%84%E7%90%86"><span class="nav-number">4.</span> <span class="nav-text">四、Scss 预处理</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95"><span class="nav-number">4.1.</span> <span class="nav-text">基础语法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%BF%9B%E9%98%B6%E8%AF%AD%E6%B3%95"><span class="nav-number">4.2.</span> <span class="nav-text">进阶语法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E6%8F%92%E4%BB%B6"><span class="nav-number">4.3.</span> <span class="nav-text">相关插件</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="chuangges" src="" data-original="/images/chuang.png">
  <p class="site-author-name" itemprop="name">chuangges</p>
  <div class="site-description" itemprop="description">chuangge's blog.</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">39</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/chuangges" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;chuangges" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-stack-overflow fa-fw"></i>StackOverflow</a>
      </span>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://juejin.im/" title="https:&#x2F;&#x2F;juejin.im&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">掘金</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://www.nowcoder.com/" title="https:&#x2F;&#x2F;www.nowcoder.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">牛客网</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://www.docschina.org/" title="https:&#x2F;&#x2F;www.docschina.org&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">印记中文</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://tool.lu/" title="http:&#x2F;&#x2F;tool.lu&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">在线工具</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://tinypng.com/" title="https:&#x2F;&#x2F;tinypng.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">图片压缩</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://bigjpg.com/" title="https:&#x2F;&#x2F;bigjpg.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">图片放大</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://tool.chinaz.com/" title="https:&#x2F;&#x2F;tool.chinaz.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">站长工具</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://learn-anything.xyz/" title="https:&#x2F;&#x2F;learn-anything.xyz&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">Learn-Anything</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://stackoverflow.com/" title="https:&#x2F;&#x2F;stackoverflow.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">Stack-Overflow</a>
        </li>
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2024</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">chuangge</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
    <span title="站点总字数">1m</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">15:14</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="external nofollow noopener noreferrer" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="external nofollow noopener noreferrer" target="_blank">NexT.Pisces</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"left","width":180,"height":360},"mobile":{"show":false},"react":{"opacityDefault":1,"opacityOnHover":1},"log":false,"tagMode":false});</script>
        <style>
            [bg-lazy] {
                background-image: none !important;
                background-color: #eee !important;
            }
        </style>
        <script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(e){e.imageLazyLoadSetting.processImages=t;var n=e.imageLazyLoadSetting.isSPA,i=e.imageLazyLoadSetting.preloadRatio||1,r=o();function o(){var t=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")),e=Array.prototype.slice.call(document.querySelectorAll("[bg-lazy]"));return t.concat(e)}function t(){n&&(r=o());for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(e.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];e=function(){r=r.filter(function(t){return o!==t})},(t=o).hasAttribute("bg-lazy")?(t.removeAttribute("bg-lazy"),e&&e()):(n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,t.removeAttribute("data-original"),e&&e()},t.src!==i&&(n.src=i))}()}function a(){clearTimeout(t.tId),t.tId=setTimeout(t,500)}t(),document.addEventListener("scroll",a),e.addEventListener("resize",a),e.addEventListener("orientationchange",a)}(this);</script></body>
</html>
